<template>
	<div class="top">
		<ul class="navTop">
			<router-link  to='/houseRanking/top' tag='li'><a><span>区域&nbsp;&nbsp;</span><img src="static/images/pull-the-button.png" alt="" style="width:14px;"/></a></router-link>
			<router-link  to='/houseRanking/price' tag='li'><a ><span>价格&nbsp;&nbsp;</span><img src="static/images/pull-the-button.png" alt="" style="width:14px;"/></a></router-link>
			<router-link  to='/houseRanking/huxing' tag='li'><a ><span>户型&nbsp;&nbsp;</span><img src="static/images/pull-the-button.png" alt="" style="width:14px;"/></a></router-link>
			<router-link  to='/houseRanking/more' tag='li'><a ><span>更多&nbsp;&nbsp;</span><img src="static/images/pull-the-button.png" alt="" style="width:14px;"/></a></router-link>
		</ul>
		<router-view></router-view>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		created:function(){
		},
		mounted: function() {
			var type = localStorage.getItem('type')
			var data = JSON.parse(localStorage.getItem('data'));
			
//			if(type=='xiaoQu'){
//				$('.navTop li').eq(2).hide();
//			}else{
//				$('.navTop li').eq(2).show();
//			}
			if(data.screenNearBy.screenNearByNum){
				$('.navTop li:nth-child(1) span').html(data.screenNearBy.screenNearByNum);
			}else if(data.screenMetroer){
				$('.navTop li:nth-child(1) span').html(data.screenMetroer);
			}else if(data.screenMetro){
				$('.navTop li:nth-child(1) span').html(data.screenMetro);
			}else if(data.screenTradArea){
				$('.navTop li:nth-child(1) span').html(data.screenTradArea);
			}else if(data.screenSpace){
				$('.navTop li:nth-child(1) span').html(data.screenSpace);
			}
			
			if(data.screenPrice.screenPriceNum){
				if(data.screenPrice.screenPriceNum==''){
					data.screenPrice.screenPriceNum=='价格'
				}else{
					data.screenPrice.screenPriceNum+='元'
				}
				$('.navTop li:nth-child(2) span').html(data.screenPrice.screenPriceNum);
			}
			
			if(data.screenHuXing){
				if(data.screenHuXing==1){
					data.screenHuXing='五室以上'
				}
				$('.navTop li:nth-child(3) span').html(data.screenHuXing);
			}
			
			
			$('.navTop').on('click','li',function(){
				$('.lbt').slideUp();
				if($(this).attr('class')){
					$('.lbt').slideDown();
					location.href='#/';
					$(this).children('a').css('color','#999').children('img').attr('src','static/images/pull-the-button.png');
				}else{
					$(this).children('a').css('color','#0186c2').children('img').attr('src','static/images/up-the-button.png');
					$(this).siblings('li').children('a').css('color','#999').children('img').attr('src','static/images/pull-the-button.png');
				}
			})
			
		},
		methods:{
			
		}
	}
</script>
<style scoped>
	.top {
	    height: 24px;
	    width: 96vw;
	    margin: 7px 0vw;
	}
	.navTop {
	    display: flex;
	    justify-content: space-around;
	    color: #2d2d2d;
	    font-size: 12px;
	    padding-top: 1px;
	}
	.navTop span {
		color: #2d2d2d;
		position: absolute;
		left: 12%;
		width: 85%;
   		max-width: 4em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	@media only screen and (max-width:375px) {
	   .navTop span {
	   		color: #2d2d2d;
			position: absolute;
			left: 7%;
			width: 85%;
	   		max-width: 3em;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.navTop img {
		position: absolute;
		right: 15%;
		top: 50%;
		transform: translateY(-50%);
		vertical-align: top;
		line-height: 18px;
	}
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: space-around;
	}
	ul li {
		line-height: 24px;
	    padding-left: 20px;
	    flex: 1;
	}
	ul li:last-child a {
		border:0;
	}
	ul li a {
		color: #999;
	    display: inline-block;
	    height: 24px;
	    line-height: 24px;
	    width: 100%;
	    transform: translateY(0px);
	    border-right: 1px solid #c6c6c6;
	}
	ul li.active a {
		color: #0186c2;
	}
	ul li a {
		color: #999;
	}
	ul li i {
		font-size: 20px;
	}
</style>